<template>
	<view class="page">
		<image class="logo" src="/static/logo.png" mode=""></image>
		<view>
			<button v-if="isChecked" type="primary" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhone">手机号码登录</button>
			<button v-else type="primary" class="btn" @click.stop="openDialog">手机号码登录</button>
		</view>
		<view class="text-base text-center gd_pt-20" @click.stop="toHome">暂不登录</view>
    <view class="login-Agreement">
      <checkbox-group @change="this.isChecked = !this.isChecked">
        <label class="radio">
          <checkbox class="checkLabel" value="checked" :checked="isChecked" style="transform:scale(0.7)" color="#5480f8" />
          <text class="">已阅读并同意</text>
          <text class="login-user-Agreement" @tap.stop="toyh(1)">《用户服务协议》</text>
          <text class="">与</text>
          <text class="login-privacy-Agreement" @tap.stop="toyh(2)">《隐私政策》</text>
        </label>
      </checkbox-group>
    </view>
    <LoginAgreementDialog
      ref="loginAgreementDialog"
      @getPhoneNumber="getPhone"
      @check-agreement="toyh"
    ></LoginAgreementDialog>
	</view>
</template>

<script>
import loginVue from './login.vue';
	export default {
		data() {
			return {
				isChecked:false,
				loginCode:"",
			};
		},
		onLoad() {
			this.checkSession().catch(() => {
			  this.getCode()
			});
		},
		methods:{
      openDialog() {
        this.$refs.loginAgreementDialog.open()
      },
			getCode(){
			    uni.login().then((res) => {
			        let { code } = res;
			        this.loginCode = code;
			      });
			},
			toyh(e){
				uni.navigateTo({
					url:'/pages/xy/xy?type='+e
				})
			},
			toHome(){
				uni.reLaunch({
					url: '/pages/special/home',
				})
			},
			checkSession() {
			    return uni.checkSession().then(() => {
			       let saToken = uni.getStorageSync("tokenValue");
			            if (saToken) {
			              uni.switchTab({
			                url: "/pages/special/home",
			              });
			              return saToken;
			            }
			            throw new Error("未登录或登录过期！");
			    });
			},
			getPhone(e){
        // 判断是否获取到了手机号授权
        if (e.detail.errMsg !== 'getPhoneNumber:ok') return
				let that=this ;
				this.login(e)
			},
			login(e){
				let that=this;
				var url=''
				// #ifdef MP-WEIXIN
				url = 'api/user/wechat/applet/login'
				// #endif
				
				// #ifdef MP-TOUTIAO
				url = 'api/user/douyin/applet/login'
				// #endif
				
				// uni.login({
				// 	success (res) {
				// 		console.log(res);
						that.$http.post(url,{
							// code:e.detail.code,   
							code:this.loginCode,   
							encrypted: e.detail.encryptedData,
							inviterUserId: 0,
							isShare: 0,
							activeId:'',
							iv: e.detail.iv,
						},1).then(res=>{
							console.log(res);
							if(res.code==200){
								uni.setStorageSync('userInfo',res.data)
								uni.setStorageSync('tokenValue',res.data.tokenValue)
								// 首次登录成功，进行socket连接
								// this.$tool.testWebsocket()
								uni.showToast({
									title:'登录成功'
								})
								setTimeout(()=>{
									uni.reLaunch({
										url:'/pages/special/home'
									})
								},1500)
							}else{
                uni.showToast({
                  icon: 'none',
                  duration: 3000,
                  title: `登录失败, 请重新登录`,
                })
							}
						}).finally(() => {
							that.getCode();
						})
				// 	}
				// })
				
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.page{
	padding: 200rpx 0;
}
.logo{
	display: flex;
	width: 300rpx;
	height: 300rpx;
	margin: 0 auto;
}
.btn{
	width: 686rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	border-radius: 10rpx;
	margin:40rpx auto;
	background: #5480f8;
}
.xy{
	font-size: 24rpx;
	color: #999;
	image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	text{
		color: $theme;
	}
}
.login-Agreement {
  .radio {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: grey;
    .login-user-Agreement {
      color: #5480f8;
    }
    .login-privacy-Agreement {
      color: #5480f8;
    }
  }
}
</style>
